<template>
  <a-card :bordered="false" >
    <div v-if="mod=='normal'" >   
      <div :class="advanced ? 'search' : null">
        <a-form layout="horizontal">
          <div :class="advanced ? null: 'fold'">
            <a-row >
              <a-col :md="8" :sm="24" >
                <a-form-item
                  label="设备名"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input placeholder="请输入设备名" v-model="computername" />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24" >
                <a-form-item
                  label="用户名"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input placeholder="请输入用户名" v-model="username" />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24" >
                <a-form-item
                  label="部门"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-cascader :changeOnSelect='true' :options="groupList" placeholder="请选择部门" v-model='groupId'/>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row v-if="advanced">
              <a-col :md="8" :sm="24" >
                <a-form-item
                  label="配件"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input-group compact>
                    <a-select v-model="ziduan" style="width: 45%">
                      <a-select-option :value="item.id" v-for="(item,index) in typeList" :key="index">
                        {{item.name}}
                      </a-select-option>
                    </a-select>
                    <a-input style="width: 55%" v-model="value" placeholder="请输入配件名"/>
                  </a-input-group>
                </a-form-item>
              </a-col> 
              <a-col :md="8" :sm="24" >
                <a-form-item
                  label="状态"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-select placeholder="请选择状态" v-model="status">
                    <a-select-option :value="0">全部</a-select-option>
                    <a-select-option :value="1">在职</a-select-option>
                    <a-select-option :value="2">离职</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col> 
            </a-row>
          </div>
          <span style="float: right; margin-top: 3px;">
            <a-button type="primary" @click="init">查询</a-button>
            <a @click="toggleAdvanced" style="margin-left: 8px">
              {{advanced ? '收起' : '展开'}}
              <a-icon :type="advanced ? 'up' : 'down'" />
            </a>
          </span>
        </a-form>
      </div>
      <a-space class="operator">
        <!-- <a-button type="primary" @click="init">查询</a-button> -->
        <a-button @click="addNew" type="primary">新建</a-button>
        <a-upload
          name="myfile"
          :showUploadList="false"
          action="/restfulapi/app/importComputerUser"
          :headers="{
            'Authori-zation':userInfo.token
          }"
          @change="uploadChange"
        >
          <a-button> <a-icon type="upload" />一键导入</a-button>
        </a-upload>
        <a-dropdown>
          <a-button> <a-icon type="setting" /> 配置字段</a-button>
          <a-checkbox-group slot="overlay" :value="columns_checked" @change="changeColumns" class="ant-dropdown-menu" style="width:500px;padding:6px 10px !important;">
            <a-row>
              <a-col :span="8" v-for="(item,index) in columns_copy" :key="index">
                <a-checkbox :value="item.title">
                  {{item.title}}
                </a-checkbox>
              </a-col>
            </a-row>
          </a-checkbox-group>
        </a-dropdown>
        <a-button @click="mod='keshihua'" >可视化</a-button>
      </a-space>
      <standard-table
        bordered 
        rowKey="id"
        :loading='loading'
        :columns="screenWidth>750?columns:columns_nofixed"
        :components="components"
        :dataSource="dataSource"
        :pagination="{total:count,pageSize:limit,current:page,showTotal:total => `共 ${total} 件`}"
        @clear="onClear"
        @change="onChange"
        :scroll="{ x: 2900,y:550 }"
      >
        <div slot="name" slot-scope="{record}" style="cursor: pointer;">
          <a-popover :title="record.name+'的设备'" placement="right">
            <template slot="content">
              <p>一级部门:{{record.firstname || '无'}}</p>
              <p>二级部门:{{record.secondname || '无'}}</p>
              <!-- <p>cpu:{{getPeijianName(record.id,record.cpu)}}</p>
              <p>主板:{{getPeijianName(record.id,record.zhuban)}}</p>
              <p>内存:{{getPeijianName(record.id,record.neicun)}}</p>
              <p>显卡:{{getPeijianName(record.id,record.xianka)}}</p>
              <p>SSD:{{getPeijianName(record.id,record.ssd)}}</p>
              <p>硬盘:{{getPeijianName(record.id,record.yingpan)}}</p>
              <p>显示器:{{getPeijianName(record.id,record.xianshiqi)}}</p>
              <p>鼠标:{{getPeijianName(record.id,record.shubiao)}}</p>
              <p>键盘:{{getPeijianName(record.id,record.jianpan)}}</p>
              <p>其他:{{getPeijianName(record.id,record.qita)}}</p> -->
            </template>
            {{record.name}}
          </a-popover>
        </div>
        <div slot="computername" slot-scope="{record}">
          {{record.computername || '无'}}
        </div>
        <div slot="secondname" slot-scope="{record}">
          {{record.secondname || '无'}}
        </div>
        <div slot="jixing" slot-scope="{record}">
          {{record.jixing || '无'}}
          <a-tag :color="getPeizhiColor(record.peizhi)" v-if="record.jixing">
            <span :style="record.peizhi=='低配'?'color:#1f2329':'color:#ffffff'">{{record.peizhi[0] || '正常'}}</span>
          </a-tag>
        </div>
        <!-- <div slot="peizhi" slot-scope="{record}">
          
        </div> -->
        <div slot="cpu" slot-scope="{record}">
          {{getPeijianName(record.id,record.cpu)}}
        </div>
        <div slot="zhuban" slot-scope="{record}">
          {{getPeijianName(record.id,record.zhuban)}}
        </div>
        <div slot="neicun" slot-scope="{record}">
          {{getPeijianName(record.id,record.neicun)}}
        </div>
        <div slot="xianka" slot-scope="{record}">
          {{getPeijianName(record.id,record.xianka)}}
        </div>
        <div slot="yingpan" slot-scope="{record}">
          {{getPeijianName(record.id,record.yingpan)}}
        </div>
        <!-- <div slot="xianshiqi" slot-scope="{record}">
          <div v-for="(item,index) in getPeijianNameANDPeizhi(record.id,record.xianshiqi)" :key="index" style="margin-bottom:3px">
            <span v-if="index > 0"> | </span>
            {{item.title}}
            <a-tag :color="getPeizhiColor(item.peizhi)">
              <span style="color:#1f2329">{{item.peizhi || '正常'}}</span>
            </a-tag>
          </div>
        </div> -->
        <div slot="xianshiqi" slot-scope="{record}">
          <div style="margin-bottom:3px" v-if='getPeijianNameANDPeizhi(record.id,record.xianshiqi)[0]'>
            {{getPeijianNameANDPeizhi(record.id,record.xianshiqi)[0].title}}
            <a-tag :color="getPeizhiColor(getPeijianNameANDPeizhi(record.id,record.xianshiqi)[0].peizhi)">
              <span :style="getPeijianNameANDPeizhi(record.id,record.xianshiqi)[0].peizhi=='低配'?'color:#1f2329':'color:#ffffff'">{{getPeijianNameANDPeizhi(record.id,record.xianshiqi)[0].peizhi[0] || '正常'}}</span>
            </a-tag>
          </div>
          <div v-else>无</div>
        </div>
        <div slot="xianshiqi1_biaoshi" slot-scope="{record}">
          <span v-if='getPeijianNameANDPeizhi(record.id,record.xianshiqi)[0]'>
            {{getPeijianNameANDPeizhi(record.id,record.xianshiqi)[0].number}}
          </span>
          <span v-else>无</span>
        </div>
        <div slot="xianshiqi2" slot-scope="{record}">
          <div style="margin-bottom:3px" v-if='getPeijianNameANDPeizhi(record.id,record.xianshiqi)[1]'>
            {{getPeijianNameANDPeizhi(record.id,record.xianshiqi)[1].title}}
            <a-tag :color="getPeizhiColor(getPeijianNameANDPeizhi(record.id,record.xianshiqi)[1].peizhi)">
              <span :style="getPeijianNameANDPeizhi(record.id,record.xianshiqi)[0].peizhi=='低配'?'color:#1f2329':'color:#ffffff'">{{getPeijianNameANDPeizhi(record.id,record.xianshiqi)[1].peizhi[0] || '正常'}}</span>
            </a-tag>
          </div>
          <div v-else>无</div>
        </div>
        <div slot="xianshiqi2_biaoshi" slot-scope="{record}">
          <span v-if='getPeijianNameANDPeizhi(record.id,record.xianshiqi)[1]'>
            {{getPeijianNameANDPeizhi(record.id,record.xianshiqi)[1].number}}
          </span>
          <span v-else>无</span>
        </div>
        <div slot="shubiao" slot-scope="{record}">
          {{getPeijianName(record.id,record.shubiao)}}
        </div>
        <div slot="jianpan" slot-scope="{record}">
          {{getPeijianName(record.id,record.jianpan)}}
        </div>
        <div slot="ssd" slot-scope="{record}">
          {{getPeijianName(record.id,record.ssd)}}
        </div>
        <div slot="qita" slot-scope="{record}">
          {{getPeijianName(record.id,record.qita)}}
        </div>
        
        <div slot="status" slot-scope="{record}">
          {{record.status | getStatus}}
        </div>
        <div slot="action" slot-scope="{record}" v-if="record.status != 3">
          <a style="margin-right: 8px" @click="edit(record.id)">
            <a-icon type="edit"/>编辑
          </a>
          <a style="margin-right: 8px" @click="edit_zhengji(record.computer_id)" v-if="record.computer_id != 0">
            <a-icon type="edit"/>整机编辑
          </a>
          <!-- <a  style="margin-right: 8px" @click="baofei(record.id)">
            <a-icon type="minus-circle"/>报废
          </a> -->
          <a-popconfirm title="确定入库？" ok-text="入库" cancel-text="取消" @confirm='ruku(record.id,record.computer_id)' v-if="record.computer_id != 0">
            <a >
              <a-icon type="container" />入库
            </a>
          </a-popconfirm>
          <a-popconfirm title="确定离职？" ok-text="离职" cancel-text="取消" @confirm='lizhi(record.id)' v-if="record.computer_id == 0&&record.status == 1">
            <a >
              <a-icon type="issues-close" />离职
            </a>
          </a-popconfirm>
          <a-popconfirm title="确定入职？" ok-text="入职" cancel-text="取消" @confirm='ruzhi(record.id)' v-if="record.status == 2">
            <a >
              <a-icon type="login" />入职
            </a>
          </a-popconfirm>
          <!-- <a-popconfirm title="确定报废？" ok-text="报废" cancel-text="取消" @confirm='baofeiAll(record.id)'>
            <a >
              <a-icon type="delete" />整机报废
            </a>
          </a-popconfirm> -->
        </div>
      </standard-table>
    </div>

    <!-- <div v-if="">
      <userDetail :mod.sync="mod" :id="detail_id"/>
    </div> -->
    <div v-if="mod=='add'">
      <listDetailAdd :mod.sync="mod" :id="detail_id" :typeList="typeList"/>
    </div>
    <div v-if="mod=='edit'">
      <listDetailEdit :mod.sync="mod" :id="detail_id" :typeList="typeList"/>
    </div>
    <div v-if="mod=='baofei'">
      <baofei :mod.sync="mod" :id="detail_id" :typeList="typeList" />
    </div>
    <div v-if="mod=='edit_zhengji'">
      <zhengjiDetail :mod.sync="mod" :id="detail_id" :typeList="typeList"/>
    </div>
    <div v-if="mod=='keshihua'">
      <keshihua :mod.sync="mod" />
    </div>
  </a-card>
</template>

<script>
import Vue from 'vue';
import StandardTable from '@/components/table/StandardTable'
import {getPeijian,getComputer,scrapComputer,warehousing,golizhi,induction} from '@/api/modules/list'
import {group} from '@/api/modules/bumen'
import {setShow} from '@/api/modules/user'
import {listDetailAdd,listDetailEdit,baofei,keshihua} from './list_detail'
import {listDetail as zhengjiDetail} from './list_detail_kucun'
import VueDraggableResizable from 'vue-draggable-resizable';

Vue.component('vue-draggable-resizable', VueDraggableResizable);

const columns = [
  {
    title: 'ID',
    width: 50,
    dataIndex: 'id'
  },
  {
    title: '使用者',
    width: 100,
    dataIndex: 'name',
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '设备名',
    dataIndex: 'computername',
    width: 100,
    scopedSlots: { customRender: 'computername' }
  },
  {
    title: '机型',
    width: 180,
    dataIndex: 'jixing',
    scopedSlots: { customRender: 'jixing' }
  },
  {
    title: 'cpu',
    dataIndex: 'cpu',
    width:140,
    scopedSlots: { customRender: 'cpu' }
  },
  {
    title: '主板',
    dataIndex: 'zhuban',
    width:140,
    scopedSlots: { customRender: 'zhuban' }
  },
  {
    title: '内存',
    dataIndex: 'neicun',
    width:140,
    scopedSlots: { customRender: 'neicun' }
  },
  {
    title: '显卡',
    dataIndex: 'xianka',
    width:140,
    scopedSlots: { customRender: 'xianka' }
  },
  {
    title: '硬盘',
    dataIndex: 'yingpan',
    width:140,
    scopedSlots: { customRender: 'yingpan' }
  },
  {
    title: '显示器1',
    dataIndex: 'xianshiqi',
    width:300,
    scopedSlots: { customRender: 'xianshiqi' }
  },
  {
    title: '显示器1-标识',
    width:150,
    dataIndex: 'xianshiqi1_biaoshi',
    scopedSlots: { customRender: 'xianshiqi1_biaoshi' }
  },
  {
    title: '显示器2',
    dataIndex: 'xianshiqi2',
    width:300,
    scopedSlots: { customRender: 'xianshiqi2' }
  },
  {
    title: '显示器2-标识',
    width:150,
    dataIndex: 'xianshiqi2_biaoshi',
    scopedSlots: { customRender: 'xianshiqi2_biaoshi' }
  },
  {
    title: 'ssd',
    dataIndex: 'ssd',
    width:140,
    scopedSlots: { customRender: 'ssd' }
  },
  {
    title: '其他',
    dataIndex: 'qita',
    width:140,
    scopedSlots: { customRender: 'qita' }
  },
  {
    title: '备注',
    width: 200,
    dataIndex: 'remark',
  },
  {
    title: '操作',
    dataIndex: 'action',
    fixed: 'right',
    width:140,
    scopedSlots: { customRender: 'action' }
  }
]

const columns_nofixed = [
  {
    title: 'ID',
    width: 50,
    dataIndex: 'id'
  },
  {
    title: '使用者',
    width: 100,
    dataIndex: 'name',
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '设备名',
    dataIndex: 'computername',
    width: 100,
    scopedSlots: { customRender: 'computername' }
  },
  {
    title: '机型',
    width: 200,
    dataIndex: 'jixing',
    scopedSlots: { customRender: 'jixing' }
  },
  {
    title: 'cpu',
    dataIndex: 'cpu',
    scopedSlots: { customRender: 'cpu' }
  },
  {
    title: '主板',
    dataIndex: 'zhuban',
    scopedSlots: { customRender: 'zhuban' }
  },
  {
    title: '内存',
    dataIndex: 'neicun',
    scopedSlots: { customRender: 'neicun' }
  },
  {
    title: '显卡',
    dataIndex: 'xianka',
    scopedSlots: { customRender: 'xianka' }
  },
  {
    title: '硬盘',
    dataIndex: 'yingpan',
    scopedSlots: { customRender: 'yingpan' }
  },
  {
    title: '显示器1',
    dataIndex: 'xianshiqi',
    width:300,
    scopedSlots: { customRender: 'xianshiqi' }
  },
  {
    title: '显示器1-标识',
    dataIndex: 'xianshiqi1_biaoshi',
    scopedSlots: { customRender: 'xianshiqi1_biaoshi' }
  },
  {
    title: '显示器2',
    dataIndex: 'xianshiqi2',
    width:300,
    scopedSlots: { customRender: 'xianshiqi2' }
  },
  {
    title: '显示器2-标识',
    dataIndex: 'xianshiqi2_biaoshi',
    scopedSlots: { customRender: 'xianshiqi2_biaoshi' }
  },
  {
    title: 'ssd',
    dataIndex: 'ssd',
    scopedSlots: { customRender: 'ssd' }
  },
  {
    title: '其他',
    dataIndex: 'qita',
    scopedSlots: { customRender: 'qita' }
  },
  {
    title: '备注',
    width: 200,
    dataIndex: 'remark',
  },
  {
    title: '操作',
    // width: 200,
    scopedSlots: { customRender: 'action' }
  }
]

//可伸缩列配置
const draggingMap = {};
columns.forEach(col => {
  draggingMap[col.dataIndex] = col.width || 140;
});
const draggingState = Vue.observable(draggingMap);
const resizeableTitle = (h, props, children) => {
  let thDom = null;
  const { key, ...restProps } = props;
  const col = columns.find(col => {
    const k = col.dataIndex || col.key;
    return k === key;
  });
  if (!col.width) {
    return <th {...restProps}>{children}</th>;
  }
  const onDrag = (x) => {
    // console.log('x',x)
    draggingState[key] = 0;
    col.width = Math.max(x, 1);
  };

  const onDragstop = () => {
    draggingState[key] = thDom.getBoundingClientRect().width;
    // draggingState[key] = Number(thDom.nextSibling.getBoundingClientRect().width);
  };
  return (
    <th {...restProps} v-ant-ref={r => (thDom = r)} width={col.width} class="resize-table-th">
      {children}
      <vue-draggable-resizable
        key={col.key}
        class="table-draggable-handle"
        w={10}
        x={col.width}
        z={1}
        axis="x"
        draggable={true}
        resizable={false}
        onDragging={onDrag}
        onDragstop={onDragstop}
      ></vue-draggable-resizable>
    </th>
  );
};

export default {
  name: 'QueryList',
  components: {StandardTable,listDetailAdd,listDetailEdit,baofei,zhengjiDetail,keshihua},
  data () {
    this.components = {
      header: {
        cell: resizeableTitle,
      },
    };
    return {
      screenWidth: document.body.clientWidth, // 屏幕宽度
      labelCol: {span: 5},
      wrapperCol: {span: 18, offset: 1},

      mod:'normal',

      advanced: false,
      columns: [],
      columns_checked:[],
      columns_copy:[],
      columns_nofixed,
      dataSource: [],
      selectedRows: [],

      typeList:[],

      count:0,
      page:1,
      limit:10,
      keyword:'',
      type:1,

      detail_id:0,
      loading:false,

      groupList:[],

      computername:'',
      username:'',
      groupId:[],
      ziduan:'',
      value:'',
      status:1,

      uploadLoading:null,
    }
  },
  created() {
    let arr = [];
    for(let item of columns){
      item.label = item.title
      item.value = item.title
      arr.push(item.title)
    }
    let params = []
    if(this.userInfo.member.setshow == ""){
      params = arr
    }else{
      params = JSON.parse(this.userInfo.member.setshow)
    }
    this.columns_copy = columns
    this.changeColumns(params,false)
  },
  mounted() {
    this.changeLayout(document.body.clientWidth)
    window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth
      })()
    }
  },
  activated() {
    this.init()
  },
  methods: {
    init(){
      this.getData()
    },
    getData(){
      this.loading = true;
      let params = {
        page:this.page,
        limit:this.limit,
        username:this.username,
        computername:this.computername,
        first:this.groupId[0],
        second:this.groupId[1],
        ziduan:this.ziduan,
        value:this.value,
        status:this.status,
      }
      getPeijian({all:1}).then((res) => {
        this.typeList = res.data
        getComputer(params).then(e => {
          this.loading = false;
          this.count = e.data.count
          this.dataSource = JSON.parse(JSON.stringify(e.data.data)) 
          group({}).then((group) => {
            let arr = []
            for(let i of group.data){
              i.label = i.name
              i.value = i.id
              if(i.parent_id == 0){
                i.children = group.data.filter(o=>o.parent_id == i.id)
                arr.push(i)
              }
            }
            console.log(arr)
            this.groupList = arr
          }).catch(() => {
            this.loading = false;
          });
        }).catch(()=>{
          this.loading = false;
        })
      }).catch(() => {
        this.loading = false;
      });
    },
    getPeijianName(id,peijian_id){
      if(!peijian_id){return '无'}
      let peijianList = this.dataSource.find(e=>e.id==id).peijianList || []
      let peijian = peijianList.filter(e=>peijian_id.indexOf(`,${e.id},`) != -1)
      if(peijian.length > 0){
        let text = ''
        for(let item of peijian){
          text = text + item.name + ' | '
        }
        text = text.substring(0,text.length-2)
        return text
      }else{
        return '无'
      }
    },
    getPeijianNameANDPeizhi(id,peijian_id){
      if(!peijian_id){return {
        title:'无',
        peizhi:'无',
        number:'无'
      }}
      let peijianList = this.dataSource.find(e=>e.id==id).peijianList || []
      let peijian = peijianList.filter(e=>peijian_id.indexOf(`,${e.id},`) != -1)
      if(peijian.length > 0){
        let arr = []
        for(let item of peijian){
          arr.push({
            title:item.name,
            peizhi:item.peizhi,
            number:item.number
          })
        }
        return arr
      }else{
        return '无'
      }
    },
    ruku(id,computer_id){
      warehousing({userid:id,computerid:computer_id}).then(() => {
        this.$message.success('入库成功')
        this.init()
      }).catch(() => {
        
      });
    },
    uploadChange(info){
      if (info.file.status === 'uploading') {
        this.uploadLoading = this.$message.loading('上传中',0)
      } else if (info.file.status === 'done') {
        this.uploadLoading();
        if(info.file.response.errcode == 400){
          this.$message.error(info.file.response.errmsg)
        }else if(info.file.response.errcode == 200){
          this.$message.success('上传成功')
          this.init()
        }
      } else if (info.file.status === 'error') {
        this.uploadLoading();
        this.$message.error('上传失败')
      }
    },
    tagChange(id){
      this.type = id
      this.init()
    },
    edit(id){
      this.detail_id = id
      this.mod = 'edit'
    },
    edit_zhengji(id){
      this.detail_id = id
      this.mod = 'edit_zhengji'
      getPeijian({all:2}).then((res) => {
        this.typeList = res.data
      })
    },
    changeColumns(e,mod=true){
      const _this = this
      this.columns_checked = e
      let arr = []
      for(let i of this.columns_copy){
        if(this.columns_checked.find(e=>e==i.title)){
          arr.push(i)
        }
      }
      this.columns = arr
      //保存
      let params = {
        field:JSON.stringify(e),
        userid:this.userInfo.member.id
      }
      if(mod){
        setShow(params).then(() => {
          _this.$store.commit('user/changeSetShow',JSON.stringify(e))
        }).catch(()=>{
          _this.$store.commit('user/changeSetShow',JSON.stringify(e))
        })
      }
    },
    lizhi(id){
      const loading = this.$message.loading('操作中',0)
      golizhi({userid:id}).then(() => {
        loading();
        this.$message.success('操作成功')
        this.init()
      }).catch(() => {
        
      });
    },
    ruzhi(id){
      const loading = this.$message.loading('操作中',0)
      induction({userid:id}).then(() => {
        loading();
        this.$message.success('操作成功')
        this.init()
      }).catch(() => {
        
      });
    },
    baofei(id){
      this.detail_id = id
      this.mod = 'baofei'
    },
    baofeiAll(id){
      this.loading = true
      scrapComputer({computerId:id}).then(() => {
        this.init()
        this.loading = false
        this.$message.success('报废成功')
      }).catch(() => {
        this.loading = false
      });
    },
    deleteRecord() {
      
    },
    statusChange(id){
      this.status = id
      this.init()
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    remove () {
      this.dataSource = this.dataSource.filter(item => this.selectedRows.findIndex(row => row.key === item.key) === -1)
      this.selectedRows = []
    },
    
    onClear() {
      this.$message.info('您清空了勾选的所有行')
    },
    onStatusTitleClick() {
      this.$message.info('你点击了状态栏表头')
    },
    onChange(e) {
      this.page = e.current
      this.init()
    },
    onSelectChange() {
      this.$message.info('选中行改变了')
    },
    addNew () {
      this.detail_id = 0
      this.mod = 'add'
    },
    handleMenuClick (e) {
      if (e.key === 'delete') {
        this.remove()
      }
    },
    changeLayout(e){
      if(e<=750){
        this.layout = 'vertical'
        this.labelCol = {}
        this.wrapperCol = {}
        this.btn_wrapperCol = {}
      }else{
        this.layout = 'horizontal'
        this.labelCol = {span: 5}
        this.wrapperCol = {span: 18, offset: 1}
        this.btn_wrapperCol = { span: 13, offset: 7 }
      }
    },
    getPeizhiColor(peizhi){
      if(peizhi == '高配'){
        return '#f50';
      }else if(peizhi == '低配'){
        return '#eff0f1';
      }else{
        return '#108ee9';
      }
    },
  },
  watch:{
    mod(e){
      if(e=='normal'){
        this.init()
      }
    },
    screenWidth(e){
      this.changeLayout(e)
    },
  },
  computed:{
    userInfo(){
      return this.$store.state.user.userInfo
    },
  },
  filters:{
    // getStatus(e){
    //   switch(e){
    //     case 1:case '1':
    //       return '使用中'
    //     case 2:case '2':
    //       return '已入库'
    //     case 3:case '3':
    //       return '已报废'
    //   }
    // }
    getStatus(e){
      switch(e){
        case 1:case '1':
          return '在职'
        case 2:case '2':
          return '离职'
      }
    }
  },
  
}
</script>

<style lang="less">
  .search{
    margin-bottom: 40px;
  }
  .fold{
    width: calc(100% - 216px);
    display: inline-block
  }
  .operator{
    margin-bottom: 18px;
  }
  .resize-table-th {
    position: relative;
    .table-draggable-handle {
      height: 100% !important;
      bottom: 0;
      left: auto !important;
      right: -5px;
      cursor: col-resize;
      touch-action: none;
      position: absolute;
    }
  }
  @media screen and (max-width: 900px) {
    .fold {
      width: 100%;
    }
  }
</style>
